<template>
  <ul class="todos">
    <li
      class="todos-item"
      v-for="(item, index) in data"
      :key="item.id"
      :class="{ completed: item.isCompleted }"
    >
      <div class="check">
        <input
          type="checkbox"
          :checked="item.isCompleted"
          @change="checkChange(item, $event)"
        />
      </div>
      <p class="content">{{ item.todo }}</p>
      <div class="close">
        <b @click="handleDel(index)">x</b>
      </div>
    </li>
  </ul>
  <div class="options">
    <button @click="filter('all')">全部</button>
    <span style="color: red; margin-right: 5px; font-size: 18px">
      {{ allCount }}
    </span>
    <span>条事项</span>
    <button @click="filter('completed')">
      "已完成："
      <span style="color: red; margin-right: 5px; font-size: 18px">
        {{ completedCount }}
      </span>
    </button>
    <button @click="filter('active')">
      "未完成："
      <span style="color: red; margin-right: 5px; font-size: 18px">
        {{ activeCount }}
      </span>
    </button>
  </div>
</template>
<script setup>
import { defineProps, toRefs, defineEmits } from "vue";
let props = defineProps(["data", "allCount", "completedCount", "activeCount"]);
let { data, allCount, completedCount, activeCount } = toRefs(props);
let emits = defineEmits(["del", "getFlag"]);
let handleDel = (i) => {
  emits("del", i);
};
let checkChange = (item, e) => {
  console.log(e.target.checked);
  item.isCompleted = e.target.checked;
};
let filter = (flag) => {
  emits("getFlag", flag);
};
</script>
<style scoped></style>
